<template>
  <div class="a-cardui full-width popular-banner">
    <div class="banner-carousel">
      <div class="banner-container">
        <img 
          src="/images/banner/3.png" 
          alt="Banner" 
          class="banner-image"
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'PopularBanner'
})
</script>

<style lang="scss" scoped>
.popular-banner {
  margin-bottom: 20px;
  
  .banner-carousel {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
  }

  .banner-container {
    overflow: hidden;
  }

  .banner-image {
    width: 100%;
    height: auto;
    display: block;
  }
}

@media (max-width: 768px) {
  .popular-banner {
    .banner-slide {
      .banner-content {
        flex-direction: column;
        padding: 20px;
        text-align: center;

        .banner-text {
          padding-right: 0;
          margin-bottom: 20px;

          h2 {
            font-size: 24px;
          }

          p {
            font-size: 16px;
          }
        }

        .banner-image {
          flex: 0 0 auto;
          width: 100%;
          max-width: 300px;
        }
      }
    }
  }
}
</style> 